<template>
  <div class="base-header">
    <div class="base-header-inner">
      <img @click="showSidebar" src="../assets/douban-app-logo.png" alt="" class="logo">
      <span>{{user.name}}</span>
      <city-picker></city-picker>
    </div>
    <base-sidebar v-show="sidebarVisible"></base-sidebar>
  </div>
</template>

<script>
  import BaseSidebar from './BaseSidebar'
  import CityPicker from './CityPicker'

  export default {
    name: 'base-header',
    components: {BaseSidebar, CityPicker},
    data () {
      return {
        sidebarVisible: false,
        city: [1, 2],
        user: {
          name: 'John',
          age: '20'
        }
      }
    },
    methods: {
      showSidebar () {
        this.sidebarVisible = !this.sidebarVisible
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../assets/sass/variables";
  .base-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: $headerHeight;
    padding: 0 30px;
    background-color: cornflowerblue;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: $headerHeight;
    .base-header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 50px;
        height: 50px;

      }
    }
  }
</style>
